<nb-card size="xsmall">
  <nb-card-body>
    <div class="map">
      <div id="mapDiv" style="width:100%;height:100%;"></div>
      <div id='overlay' style="display:none"></div>
    </div>
    <div class="map_select">
      <p-selectButton [options]="maps" [(ngModel)]="selectedMap" (click)="switchTdtMap()"></p-selectButton>
    </div>
    <div class="distribution_select">
      <ul style="padding:0.25rem 0rem">
        <li class="gj">国家级监测站</li>
        <li class="sj">省级监测站</li>
        <li class="pt">普通监测站</li>
        <li class="tc">统测站</li>
      </ul>
    </div>
    <div class="handle_select">
      <p-selectButton [options]="tools" [(ngModel)]="selectedTool" (click)="switchTool()">
        <ng-template let-item>
          <div style="padding: .5rem 0.75rem;">
            <img style="vertical-align: middle;" src="assets/images/dynamics/distribute/{{item.name}}"/>
          </div>
        </ng-template>
      </p-selectButton>
    </div>
    <div class="left-box">
      <div class="search-box">
        <div class="option_3">
          <span>测站类型：</span>
          <select class="option_4" [(ngModel)]="selectedType">
            <option *ngFor="let stType of stTypes" [value]="stType.id">
              {{stType.name}}
            </option>
          </select>
        </div>
        <div class="option_3">
          <span>行政区划：</span>
          <select class="option_5" [(ngModel)]="selectedCity">
            <option *ngFor="let city of cities" [value]="city.id">
              {{city.name}}
            </option>
          </select>
          <p-button style="width:75px;" (onClick)="search()" icon="pi pi-search" label="查询"></p-button>
        </div>
      </div>
      <div class="content-box">
        <div class="list-box">
          <p-table [columns]="cols" [value]="stInfo" [scrollable]="true">
            <ng-template pTemplate="header" let-columns>
              <tr>
                <th *ngFor="let col of columns" style="text-align:center">
                  {{col.header}}
                </th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-columns="columns">
              <tr>
                <td *ngFor="let col of columns" style="text-align:center">
                  {{rowData[col.field]}}
                </td>
              </tr>
            </ng-template>
          </p-table>
        </div>
      </div>
    </div>
  </nb-card-body>
</nb-card>
